<!-- 评论列表 -->
<div class="comments-list">
    {% if post.comments %}
        {% for comment in post.comments %}
            <div class="comment mb-3">
                <div class="d-flex">
                    <div class="me-3">
                        {% if comment.author.avatar and comment.author.avatar != 'default.png' %}
                            <img src="{{ url_for('static', filename='avatars/' + comment.author.avatar) }}" 
                                 class="user-avatar" alt="{{ comment.author.username }}"
                                 onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'default-avatar\'>{{ comment.author.username[0]|upper }}</div>'">
                        {% else %}
                            <div class="default-avatar">{{ comment.author.username[0]|upper }}</div>
                        {% endif %}
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div class="comment-author">
                                <strong>{{ comment.author.username }}</strong>
                                <small class="text-muted ms-2">
                                    <i class="fas fa-clock"></i> {{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </div>
                            {% if current_user == comment.author %}
                            <div class="comment-actions">
                                <button class="btn btn-sm btn-link text-danger" 
                                        onclick="deleteComment({{ comment.id }})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            {% endif %}
                        </div>
                        <div class="comment-content">
                            {{ comment.content }}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <p class="text-muted text-center">暂无评论</p>
    {% endif %}
</div>

<!-- 评论表单 -->
<div class="comment-form mt-3">
    <form action="{{ url_for('add_comment', post_id=post.id) }}" method="POST">
        <div class="mb-3">
            <textarea class="form-control" name="content" rows="3" placeholder="写下你的评论..." required></textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="btn btn-primary">发表评论</button>
        </div>
    </form>
</div>

<style>
.comment {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.comment:hover {
    background: #f1f3f5;
}

.comment-author {
    font-size: 0.9rem;
}

.comment-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #495057;
}

.comment-actions .btn-link {
    padding: 0;
    font-size: 0.9rem;
}

.comment-actions .btn-link:hover {
    color: #dc3545 !important;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.default-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}
</style>

<script>
function deleteComment(commentId) {
    if (confirm('确定要删除这条评论吗？')) {
        fetch(`/comment/${commentId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 刷新评论列表
                location.reload();
            } else {
                alert('删除失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('删除失败，请稍后重试');
        });
    }
}
</script> 